<template>
    <div>
        <header :style="{ backgroundImage: `url(${infolist.info && infolist.info.poi_back_pic_url})` }">
            <div class="headertop">
                <img :src="infolist.info && infolist.info.picUrl" alt="">
                <span>{{ infolist.info && infolist.info.name }}</span>
            </div>
            <div class="sectop">
                <input type="text" placeholder="搜索">
                <span>点餐</span>
                <span>评价</span>
                <span>商家</span>
                <van-icon @click="shoucang" ref="title" color="#000" class="title" name="star-o" dot/>
            </div>
        </header>
        <main>
            <div class="left">
                <div class="left_list" v-for="(item, index) in infolist.taglist" :key="index"
                    @click="fousindex = index">
                    {{ item.name }}</div>
            </div>
            <div class="right">
                <div class="right_list" v-for="(item, index) in infolist.taglist[fousindex].goodlist" :key="index">
                    <div class="right_img">
                        <img :src="item.picture" alt="">
                    </div>
                    <div class="right_text">
                        <p>{{ item.name }}</p>
                        <div class="sale">
                            <span>{{ item.promotion_info }}</span>
                            <span>{{ item.month_saled_content }}</span>
                        </div>
                        <div class="right_down">
                            <span>￥{{ item.min_price }}</span>
                            <div class="circle">+</div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</template>

<script>
import { Dialog } from 'vant';
import { shop_info } from '../../src/api/index.js'
export default {
    data() {
        return {
            fousindex: 0,
            infolist: {}
        }
    },
    mounted() {
        shop_info({ id: this.$route.params.id }).then((res) => {
            if (res.data.code == 200) {
                this.infolist = res.data.shopinfo;
            } else {
                Dialog({ message: '该店铺已倒闭！' }).then((res) => {
                    if (res == 'confirm') {
                        this.$router.go(-1)
                    }

                })
            }
        })
    },
    methods: {
        shoucang() {
            // console.log( this.$refs.title.style);
            this.$refs.title.style.color = '#f00'
            Dialog.alert({
                message: '已收藏',
            }).then(() => {
                // on close
            });
        }
    }
}
</script>

<style scoped>
header {
    height: 150px;
    width: 100%;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;
}

.headertop {
    height: 40px;
    width: 100%;
    /* background-color: beige; */
    display: flex;
    margin-top: 20px;
    align-items: center;
    overflow: hidden;
}

.headertop span {
    font-size: 14px;
}

.headertop img {
    height: 35px;
    width: 35px;
    border-radius: 50%;
    margin-right: 10px;
    margin-left: 10px;
}

.sectop {
    height: 40px;
    width: 100%;
    margin-top: 20px;
    margin-left: 10px;
    box-sizing: border-box;
}

header input {
    height: 25px;
    width: 60px;
    border: none;
    text-align: center;
    border-radius: 12px;
    margin-right: 10px;
    font-size: 12px;
    color: white;
    outline: none;
}

header span {
    margin-right: 10px;
    font-size: 12px;
    color: white;
}

main {
    width: 100%;
    height: 500px;
    /* background-color: aqua; */
    display: flex;
    box-sizing: border-box;
}

.left_list {
    height: 40px;
    width: 100%;
    font-size: 12px;
    text-align: center;
    line-height: 40px;
}

.left {
    width: 28%;
    height: 100%;
    /* background-color: rgb(125, 125, 129) */
}

.left_list {
    height: 40px;
    width: 100%;
}

.right {
    width: 72%;
    height: 100%;
    /* background-color: green; */
}

.sale {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-top: 5px;
}

.sale span:nth-child(2) {
    margin-right: 10px;
}

.right_list {
    width: 100%;
    height: 100px;
    /* background-color: bisque; */
    display: flex;
}

.right_img {
    width: 30%;
    height: 100%;
    margin-top: 20px;
    margin-left: 10px;
}

.right_img img {
    width: 100%;
}

.right_text {
    width: 70%;
    height: 100%;
    margin-left: 10px;
    margin-top: 15px;
}

.right_text p {
    font-weight: 700;
}

.right_down {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
}

.right_down span {
    color: red;
}

.circle {
    height: 14px;
    width: 14px;
    border-radius: 50%;
    text-align: center;
    background-color: rgb(7, 120, 158);
    color: white;
    margin-right: 20px;
    line-height: 14px;
    margin-top: 5px;
}
</style>